<template style="min-height: 90vh">
  <div>
    <el-input
      placeholder="请输入标题"
      v-model="title"
      class="title-class"
      clearable>
    </el-input>
    <el-container>
      <el-main>
        <mavon-editor v-model="context" :toolbars="toolbars" @keydown="" @save="SaveQuestion" class="md" style="min-height: 60%;height: 60vh;width: 100%">
        </mavon-editor>
      </el-main>
    </el-container>
    <div class="text-area">
      <el-input type="textarea" v-model="check_data.input" placeholder="输入" class="cla-input" rows = "6"></el-input>
      <el-input type="textarea" v-model="check_data.output" placeholder="输出" class="cla-output" rows = "6"></el-input>
    </div>
    <el-button type="primary" style="margin-top: 2vh" @click="SaveQuestion">提交</el-button>
  </div>
</template>

<script>
  import Api from '../common/api';
    export default {
        name: "add-question",
      data(){
        return {
          check_data:{},
          title:'',
          userInfo:'',
          context: ' ',//输入的数据
          toolbars: {
            bold: true, // 粗体
            italic: true, // 斜体
            header: true, // 标题
            underline: true, // 下划线
            mark: true, // 标记
            superscript: true, // 上角标
            quote: true, // 引用
            ol: true, // 有序列表
            link: true, // 链接
            imagelink: true, // 图片链接
            help: true, // 帮助
            code: true, // code
            subfield: true, // 是否需要分栏
            fullscreen: true, // 全屏编辑
            readmodel: true, // 沉浸式阅读
            /* 1.3.5 */
            undo: true, // 上一步
            trash: true, // 清空
            save: true, // 保存（触发events中的save事件）
            /* 1.4.2 */
            navigation: true // 导航目录
          }
        }
      },
      methods:{
        SaveQuestion(){
          console.log("save method");
          let user = Api.getStorageItem('user');
          if (!user) {
            this.$router.push('/login');
          } else if (user === '过期') {
            localStorage.removeItem('user');
            this.$message.error('您的登录已经过期，请重新登录');
            this.$router.push('/login');
          } else {
            this.userInfo = user;
          }
          let params={
            author:this.userInfo.username,
            author_id:this.userInfo.id,
            content:this.context,
            title:this.title,
            create_time:new Date(),
            update_time:new Date(),
            sample_input:this.check_data.input,
            sample_output:this.check_data.output
          };
          console.log("文章参数",params);
          Api.LRapiCall('post','/question/save',params).then(resolve=>{
            this.$router.push('/index/questionBank');
          },reject=>{
            console.log(reject);
            this.$message.error(reject.data.msg);
          })
        }
      }
    }
</script>

<style scoped>
  .cla-input{
  }
  .cla-output{

  }
  .text-area{
    display: flex;
    justify-content: center;
    align-items: center;
  }
.v-note-panel{
  min-height: 90vh;
}
.title-class{
  margin-top: 3vh;
  width: 40%;
}
</style>
